<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css">
    <script src="resources/layui/layui.js" charset="utf-8"></script>
    <script src="resources/jquery.min.js"></script>
    <style>
        /*.addwidth {
            height: 20px;
        }*/
        .layui-table-cell{
            text-align:center;
            height: 34px;
            white-space: normal;
        }
        .layui-table img{
            max-width:220px;
            max-height: 34px;
        }
    </style>
</head>
<body>
<!-- 页面内容结构 -->
<!-- 员工信息表 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 添加和批量删除模块 -->

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-refresh" id="returnList">返回列表</button>
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-circle-fine" id="add-user-btn">添加员工</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-delete" id="delete-all-select"
            style="margin-right:15px;">删除数据
    </button>
    id：
    <div class="layui-inline">
        <input type="text" class="layui-input" name="selectid" id="selectid" placeholder="请输入id" autocomplete="off"
               size="6" style="height:34px;">
    </div>
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-search" id="search-from-id" style="margin-right:15px;">搜索</button>
    姓名：
    <div class="layui-inline">
        <input type="text" class="layui-input" name="selectname" id="selectbyname" placeholder="请输入姓名" autocomplete="off"
               size="10" style="height:34px;">
    </div>
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-search" id="search-from-name">搜索</button>
    <div class="layui-inline" style="margin-left:18px;">
        部门：
        <div class="layui-input-inline" style="width:120px;">
            <select id="depart01" name="depart">
            </select>
        </div>
    </div>
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-search" id="search-from-depart">查询</button>
</script>

<!-- 分页模块 -->
<div id="pages"></div>


<!-- 添加员工信息弹出层 -->
<div id="add-user-layer" style="display: none; padding:30px;">
    <form id="add-user-form" class="layui-form layui-form-pane"
          method="post">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" name="hiredate" id="test17"
                               lay-verify="required" style="width: 215px;">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 20px;">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" class="layui-input" name="birthday" id="test20"
                               lay-verify="required" style="width: 215px;">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 25px;">
                <div class="layui-inline">
                    <label class="layui-form-label">学历</label>
                    <div class="layui-input-inline" style="width: 215px; margin-right: 17px;">
                        <select name="edu" lay-filter="edu">
                            <option value="博士后">博士后</option>
                            <option value="博士">博士</option>
                            <option value="研究生">研究生</option>
                            <option value="本科" selected="">本科</option>
                            <option value="大专">大专</option>
                            <option value="高中">高中</option>
                            <option value="初中">初中</option>
                        </select>
                    </div>
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline" style="width: 215px;">
                        <select name="sex" lay-filter="sex">
                            <option value="女">女</option>
                            <option value="男" selected="">男</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" class="layui-input"
                               lay-verify="required" autocomplete="off" style="width: 215px;">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 20px;">
                    <label class="layui-form-label">部门</label>
                    <div class="layui-input-inline">
                        <input type="text" id="depart" name="depart" class="layui-input"
                               lay-verify="required" autocomplete="off" style="width: 215px;" readonly="readonly">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 25px;">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-inline">
                    <input type="text" id="email" name="email" lay-verify="email"
                           autocomplete="off"
                           class="layui-input" style="width: 215px;">
                </div>
                <div class="layui-inline" style="margin-left: 35px;">
                    <label class="layui-form-label">手机号码：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="phone" name="phone" lay-verify="phone"
                               autocomplete="off"
                               class="layui-input" style="width: 215px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 25px;">
            <div class="layui-inline">
                <label class="layui-form-label">工资</label>
                <div class="layui-input-inline">
                    <input type="text" name="wage" class="layui-input"
                           lay-verify="number" autocomplete="off" style="width: 215px;">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="text" id="password" name="password"
                           class="layui-input" lay-verify="required" readonly="readonly"
                           autocomplete="off" style="width: 215px;">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 30px;">
            <div class="layui-input-block"">
                <button class="layui-btn layui-icon layui-icon-ok" lay-submit
                        lay-filter="add-user-form-submit" style="width: 120px;">提交
                </button>
            <button type="button" class="layui-btn layui-btn-danger"
                    id="getPwd"  style="width: 120px;margin-left: 25px;">生成密码
            </button>
                <button type="reset"
                        class="layui-btn layui-btn-primary layui-icon layui-icon-refresh"
                        style="width: 120px;margin-left: 25px;">重置
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 编辑员工信息弹出层 -->
<div id="update-user-layer" style="display: none; padding: 15px 30px;">
    <form id="update-user-form" class="layui-form layui-form-pane"
          lay-filter="update-user-form" method="post">
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="editId" class="layui-input"
                       readonly="readonly" autocomplete="off" disabled=”disabled”>
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入职时间</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" lay-verify="required" class="layui-input" name="hiredate"
                               id="test18" style="width: 310px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" lay-verify="required" class="layui-input" name="birthday"
                               id="test19" style="width: 310px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" class="layui-input"
                       lay-verify="required" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <select id="depart02" name="depart" lay-filter="depart"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <select name="sex" lay-filter="sex">
                    <option value="女">女</option>
                    <option value="男" selected="">男</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学历</label>
            <div class="layui-input-block">
                <select name="edu" lay-filter="edu">
                    <option value="博士后">博士后</option>
                    <option value="博士">博士</option>
                    <option value="研究生">研究生</option>
                    <option value="本科" selected="">本科</option>
                    <option value="大专">大专</option>
                    <option value="高中">高中</option>
                    <option value="初中">初中</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">工资</label>
            <div class="layui-input-block">
                <input type="text" name="wage" class="layui-input"
                       lay-verify="number" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" id="password1"
                       class="layui-input" lay-verify="required" readonly="readonly"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-icon layui-icon-ok" lay-submit
                        lay-filter="udpate-user-form-submit">提交
                </button>
                <!-- <button type="reset"
                    class="layui-btn layui-btn-primary layui-icon layui-icon-refresh">重置</button> -->
                <button type="button" class="layui-btn layui-icon layui-btn-danger"
                        id="getPwd1">生成密码
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    function doget() { //为了layer.ext.js加载完毕再执行
        console.log('hhh')
        layer.photos({
            photos: '#layer-photos-demo',
            anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        })
    }
    layui.use(['jquery', 'laypage', 'layer', 'table', 'form', 'laydate'],
        function () {
            var $ = layui.$;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var laypage = layui.laypage;
            var laydate = layui.laydate;
            var photos = layui.photos;

            function Ajax(){
                $.ajax({
                    url: 'selectDepartByEid',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        $('#depart').val(data.departName);
                    }
                })
            }

            function departAjax(){
                $.ajax({
                    url: 'list_RoleAndDepart',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $('#depart').append("<option value=''>请选择部门</option>");
                        for (var i=0; i<data.data1.length; i++){
                            $('#depart').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                            $('#depart01').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                            $('#depart02').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                        }
                    }
                })
            }

            //开启公历节日
            laydate.render({
                elem: '#test17'
                , calendar: true
            });
            laydate.render({
                elem: '#test18'
                , calendar: true
            });
            laydate.render({
                elem: '#test19'
                , calendar: true
            });
            laydate.render({
                elem: '#test20'
                , calendar: true
            });
            departAjax();
            function showAll(url_data, method_data) {
                //显示所有员工信息
                table.render({
                    elem: '#test',
                    url: url_data,
                    method: method_data,
                    limit: 8,
                    toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                    defaultToolbar: ['filter', 'exports', 'print'],
                    title: '用户数据表',
                    cols: [[{
                        type: 'checkbox'
                    }, {
                        field: 'id',
                        title: 'ID',
                        sort: true,
                        align: 'center'
                    }, {
                        field: 'name',
                        title: '姓名',
                        align: 'center'
                    }, {
                        field: 'path',
                        title: '头像',
                        align: 'center',
                        templet: "<div id='layer-photos-demo' class='layer-photos-demo'><img src='{{ d.path }}'></div>",
                        //height: 180 //180
                    }, {
                        field: 'age',
                        title: '年龄',
                        sort: true,
                        align: 'center',
                        width:230
                    }, {
                        field: 'sex',
                        title: '性别',
                        align: 'center',
                        width:230
                    }, {
                        field: 'edu',
                        title: '学历',
                        align: 'center',
                        width:230
                    }, {
                        field: 'depart',
                        title: '部门',
                        align: 'center',
                        width:230
                    }, {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#barDemo',
                        align: 'center',
                        width: 130
                    }]],
                    /*done: function (res, curr, count) { //表格数据加载完后的事件

                    },*/
                    id: 'user_id',
                });
            }

            layer.photos({
                photos: '#layer-photos-demo'
                ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
            });


            //显示所有员工信息
            showAll('list-by-departId', 'get');
            function shuju(url_data1, url_data2) {
                $.ajax({
                    url: url_data1,
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        laypage.render({
                            elem: 'pages',
                            count: data.total//数据总数，从服务端得到
                            ,
                            limit: data.count,
                            limits: [5, 8, 16, 30, 1000],
                            groups: 5,
                            layout: ['count', 'prev', 'page', 'next',
                                'limit', 'refresh', 'skip'],
                            jump: function (obj, first) {
                                //首次不执行
                                if (!first) {
                                    Ajax();
                                    showAll(url_data2 + "start="
                                        + (obj.curr - 1)
                                        * obj.limit + "&count="
                                        + obj.limit, "get");
                                }
                            }
                        });
                    }
                });
            }

            shuju('list-by-departId', 'list-by-departId?');
            // 显示添加员工信息弹出层
            $('body').on('click', '#add-user-btn', function () {
                // 每次显示前重置表单
                $('#add-user-form')[0].reset();
                layer.open({
                    type: 1,
                    title: '添加员工信息',
                    skin: 'layui-layer-molv',
                    area: ['765px'],
                    content: $('#add-user-layer'),
                    offset: 20
                });
                Ajax();
            });

            // 添加用户表单提交
            form.on('submit(add-user-form-submit)', function (data) {
                // ajax方式添加用户
                $.ajax({
                    url: "addEmployeeInfo",
                    type: "post",
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 1) {
                            Ajax();
                            layer.close(layer.index);
                            form.render();
                            layer.msg('添加成功');
                            shuju('getPageInfo', 'list?');
                            table.reload('user_id');
                        } else {
                            layer.msg('添加失败');
                        }
                    },
                    error: function () {
                        console.log("ajax error");
                    }
                });
                // 阻止表单跳转
                return false;
            });

            //批量删除已选择的行
            $('body').on(
                'click',
                '#delete-all-select',
                function () {
                    var arr = table.checkStatus('user_id').data;
                    console.log(arr);
                    if (arr.length == 0) {
                        layer.msg("请选择要删除的项！");
                    } else {
                        layer.confirm('确定删除这' + arr.length
                            + '条数据吗？', function (index) {
                            var ids = [];
                            for (var i in arr) {
                                ids.push(arr[i].id);
                            }
                            console.log(ids);
                            // ajax方式批量删除员工信息
                            $.ajax({
                                url: 'deleteBatch',
                                type: "post",
                                data: {
                                    "ids[]": ids
                                },
                                dataType: 'json',
                                success: function (data) {
                                    if (data.status == 1) {
                                        Ajax();
                                        layer.msg('删除成功');
                                        table.reload('user_id');
                                        shuju('getPageInfo',
                                            'list?');
                                    } else {
                                        layer.msg('删除失败');
                                        console.log(eids);
                                    }
                                },
                                error: function () {
                                    console.log("ajax error");
                                }
                            });
                            layer.close(index);
                        });
                    }

                })

            //监听行工具栏事件：删除用户与更新用户
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                // 删除用户事件
                if (event === 'del') {
                    layer.confirm('确定删除该员工信息吗？', function (index) {
                        // ajax方式删除用户
                        $.ajax({
                            url: 'delete',
                            type: "post",
                            data: {
                                "id": data.id
                            },
                            dataType: 'json',
                            success: function (data) {
                                if (data.status == 1) {
                                    Ajax();
                                    layer.msg('删除成功');
                                    table.reload('user_id');
                                    shuju('getPageInfo', 'list?');
                                } else {
                                    layer.msg('删除失败');
                                }
                            },
                            error: function () {
                                console.log("ajax error");
                            }
                        });
                        layer.close(index);
                    });
                }

                //编辑员工信息
                if (event == 'edit') {
                    form.val('update-user-form', {
                        'id': data.id,
                        'name': data.name,
                        'hiredate': data.date,
                        'birthday': data.birthdate,
                        'sex': data.sex,
                        'edu': data.edu,
                        'depart': data.depart,
                        'wage': data.wage,
                        'password': data.password
                    });
                    // 显示更新员工信息表单的弹出层
                    layer.open({
                        type: 1,
                        title: '编辑员工信息 ( id=' + data.id + ' )',
                        skin: 'layui-layer-molv',
                        area: ['480px'],
                        content: $('#update-user-layer')
                    });
                    // 更新用户表单提交
                    form.on('submit(udpate-user-form-submit)',
                        function (data) {
                            // ajax方式添加用户
                            $.ajax({
                                url: "update",
                                type: "post",
                                data: JSON.stringify(data.field),
                                contentType: 'application/json',
                                dataType: 'json',
                                success: function (data) {
                                    if (data.status == 1) {
                                        Ajax();
                                        layer.close(layer.index);
                                        form.render();
                                        layer.msg('更新成功');
                                        table.reload('user_id');
                                    } else {
                                        layer.msg('更新失败');
                                    }
                                },
                                error: function () {
                                    console.log("ajax error");
                                }
                            });
                            // 阻止表单跳转
                            return false;
                        });
                }
            });

            $('body').on('click', '#returnList', function () {
                //Ajax();
                shuju('list-by-departId', 'list-by-departId?');
                showAll('list-by-departId', 'get');
            })

            //检验id的合法性
            $('body').on('click', '#search-from-id', function () {
                var sid = $("#selectid").val();
                if (sid == "") {
                    layer.msg('不能为空');
                    return false;
                }
                else if (!(/(^[1-9]\d*$)/.test(sid))) {
                    layer.msg('请输入合法id');
                    return false;
                } else {
                    /*shuju("manager-search-to-id-info?id=" + sid,
                        'manager-search-to-id-info?');*/
                    showAll("manager-search-to-id-info?id=" + sid,
                        "GET");
                }
            })
            //根据姓名查询
            $('body').on('click', '#search-from-name', function () {
                var name = $("#selectbyname").val();
                if (name == "") {
                    layer.msg('不能为空');
                    return false;
                } else {
                    Ajax();
                    shuju('search-from-name?name=' + name
                        + "&page=1&limit=8",
                        'search-from-name?name=' + name
                        + '&');
                    showAll("search-from-name?name=" + name,
                        "GET");
                }
            })
            $('body').on(
                'click',
                '#search-from-depart',
                function () {
                    var depart = $("#depart").val();
                    if (depart == "") {
                        layer.msg("不能为空");
                        return false;
                    } else {
                        Ajax();
                        shuju('search-from-depart?depart=' + depart
                            + "&page=1&limit=8",
                            'search-from-depart?depart=' + depart
                            + '&');
                        showAll('search-from-depart?depart=' + depart,
                            "GET");
                    }
                })

            function pwd(pw) {
                $.ajax({
                    url: 'getPwd',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        var pwd = data.pwd;
                        $(pw).val(pwd);
                    }
                });
            }

            //获取生成的随机密码
            $('#getPwd').click(function () {
                pwd("#password");
            });

            $('#getPwd1').click(function () {
                pwd("#password1");
            });

        });
</script>

</body>
</html>